<template>
  <el-card class="box-card" shadow="never">
    <div slot="header" class="clearfix">
      <div class="head-container">
        <div class="table_title">字典项列表</div>
        <el-input v-model="query.dicItemIdOrName" placeholder="字典项名称/字典项ID" size="small" class="filter-item" style="width: 200px;" @keyup.enter.native="toQuery" />
        <rrOperation />
        <crudOperation :permission="permission" />
      </div>
    </div>
    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="570px">
      <el-form ref="form" :inline="false" :model="form" :rules="rules" size="small" label-width="100px" style="width: 350px;">
        <el-form-item label="字典名称" prop="dicName">
          <el-input v-model="form.dicName" disabled />
        </el-form-item>
        <el-form-item label="字典项ID" prop="itemId">
          <el-input v-model="form.itemId" />
        </el-form-item>
        <el-form-item label="字典项名称" prop="itemName">
          <el-input v-model="form.itemName" />
        </el-form-item>
        <el-form-item label="代码" prop="itemCode">
          <el-input v-model="form.itemCode" />
        </el-form-item>
        <el-form-item label="排序" prop="itemOrder">
          <el-input-number v-model="form.itemOrder" controls-position="right" />
        </el-form-item>
        <el-form-item label="状态" prop="itemStates">
          <el-radio-group v-model="form.itemStates">
            <el-radio :label="1">可用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
      </div>
    </el-dialog>
    <el-table ref="table" v-loading="crud.loading" :data="crud.data[crud.listName]">
      <el-table-column label="序号" width="60px" prop="indexNumber">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="itemId" label="字典项ID" />
      <el-table-column :show-overflow-tooltip="true" prop="itemName" label="字典项名称" />
      <el-table-column prop="itemCode" label="代码" />
      <el-table-column prop="creatorUser" label="创建人" />
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          {{ formatTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.itemStates" :active-value="1" :inactive-value="0" :disabled="false" active-color="#409EFF" inactive-color="#F56C6C" @change="changeEnabled(scope.row, scope.row.itemStates)" />
        </template>
      </el-table-column>
      <el-table-column v-permission="['admin', 'dic/edit', 'dic/delete']" label="操作" width="130px" align="center" fixed="right">
        <template slot-scope="scope">
          <udOperation :data="scope.row" :permission="permission" msg="确定删除该字典项吗，此操作不能撤销！" />
        </template>
      </el-table-column>
    </el-table>
    <pagination />
  </el-card>
</template>

<script>
import crudDict from '@/api/system/dictItem'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import moment from 'moment'

const defaultForm = { aid: null, dicId: null, dicItemId: null, dicName: null, itemName: null, itemId: null, itemCode: null, itemStates: 1, itemOrder: 1 }
export default {
  name: 'DictItem',
  components: { crudOperation, rrOperation, udOperation, pagination },
  cruds() {
    return CRUD({ title: '字典项', url: 'admin/dic/item/list', crudMethod: { ...crudDict }, optShow: { reset: false, add: true, edit: false, del: false, download: false, opts: true }, queryOnPresenterCreated: false, idField: 'dicItemId' })
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  props: {
    activeRow: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      permission: {
        add: ['admin', 'dic/add'],
        edit: ['admin', 'dic/edit'],
        del: ['admin', 'dic/delete']
      },
      rules: {
        itemId: [
          { required: true, message: '请输入字典项ID', trigger: 'blur' }
        ],
        itemName: [
          { required: true, message: '请输入字典项名称', trigger: 'blur' }
        ],
        itemCode: [
          { required: true, message: '请输入代码', trigger: 'blur' }
        ],
        itemOrder: [
          { required: true, message: '请输入排序', trigger: 'blur' }
        ],
        itemStates: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    activeRow: function(val) {
      if (val) {
        this.crud.defaultForm.dicId = val.dicId
        this.crud.defaultForm.dicName = val.dicName
        this.crud.params.dicId = val.dicId
        this.crud.toQuery()
      }
    }
  },
  methods: {
    formatTime(timestamp) {
      return moment(timestamp).format('YYYY-MM-DD HH:mm:ss')
    },
    // 改变状态
    changeEnabled(data, val) {
      const displayName = val === 1 ? '启用' : '禁用'
      this.$confirm('此操作将 "' + displayName + '" ' + data.itemName + ', 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        crudDict.edit(data).then(res => {
          this.crud.notify(displayName + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
        }).catch(() => {
          data.itemStates = data.itemStates === 0 ? 1 : 0
        })
      }).catch(() => {
        data.itemStates = data.itemStates === 0 ? 1 : 0
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.crud-opts {
  display: inline-flex;
}

.table_title {
  display: inline-block;
  line-height: 30px;
  margin: 0 10px 0 0;
  vertical-align: middle;
  font-weight: bold;
  color: #303133;
  font-size: 15px;
}

.head-container {
  padding-bottom: 0;

  /deep/.filter-item {
    margin-bottom: 0;
  }
}
</style>
